<template>
  	<div class="tab">
  		<router-link v-for="item of tabList" :key="item.label" :to="item.path" class="tab-item">
  			<span class="tab-link">{{item.label}}</span>
  		</router-link>
	</div>
</template>

<script>
  	export default {
		name: 'Tab',
		data() {
			return {
				tabList: [
					{ label: '推荐', path: '/recommend' },
					{ label: '歌手', path: '/singer' },
					{ label: '排行', path: '/rank' },
					{ label: '搜索', path: '/search' }
				]
			}
		}
	}
</script>

<style scoped lang="stylus">
  	@import '../../common/stylus/variable'
	
	.tab
		display: flex
		height: 44px
		line-height: 44px
		font-size: $font-size-medium
		.tab-item
			flex: 1
			text-align: center
			.tab-link
				padding-bottom: 5px
				color: $color-text-l
			&.router-link-active
				.tab-link
					color: $color-theme
					border-bottom: 2px solid $color-theme
</style>